<template>
  <a-modal title="上传相关文件" v-model="importVisible" destroyOnClose :maskClosable="false">
    <a-alert type="info" show-icon>
      <span slot="message"> 请注意上传文件的类型 </span>
    </a-alert>
    <br />
    <a-upload-dragger
      name="file"
      :accept="acceptFileType"
      @reject="handleImportReject"
      :before-upload="beforeImportUpload"
      :show-upload-list="false"
      multiple>
      <div v-if="importFileList.length">
        <a-row class="l-h-25">
          <a-col :span="8" class="p-r-10">
            <p class="ant-upload-drag-icon m-b-0">
              <a-icon type="file" />
            </p>
          </a-col>
          <a-col :span="16" class="text-left">
            <p class="ant-upload-hint" v-for="file in importFileList" :key="file.label">
              {{ file.name }}
              <a-icon type="close-circle" style="color: red; margin-left: 10px" @click.stop="deleteFileBeforeSubmit(file)" />
            </p>
            <p class="ant-upload-hint">将文件拖到此处或点击此处重新上传</p>
          </a-col>
        </a-row>
      </div>
      <div v-else>
        <p class="ant-upload-drag-icon m-b-0">
          <a-icon type="cloud-upload" />
        </p>
        <p class="ant-upload-hint">您可以将文件拖到此处或点击此处上传</p>
        <p class="ant-upload-hint">文件格式为{{ acceptFileType }}</p>
      </div>
    </a-upload-dragger>
    <br />
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleImportOk">
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import { FILETYPE, FILESIZE } from '@/store/mutation-types'

export default {
  props: {},
  data () {
    return {
      importVisible: false, // 上传文件模态框
      acceptFileType: FILETYPE,
      importFileList: [], // 上传文件
      loading: false
    }
  },
  methods: {
    handleCancel () {
      this.importFileList = []
      this.importVisible = false
      this.loading = false
    },
    /**
     * 确定保存导入数据
     */
    handleImportOk () {
      if (this.importFileList.length === 0) {
        this.$message.warning('请添加上传文件')
        return
      }
      this.$emit('importFileFun', this.importFileList)
    },
    /**
     * 拖拽验证文件类型
     */
    handleImportReject (file) {
      this.beforeImportUpload(file)
    },
    /**
     * 上传导入文件前验证文件类型
     */
    beforeImportUpload (file) {
      return new Promise((resolve, reject) => {
        // 文件格式是否为doc、docx
        const isAcceptType = file.name.toLowerCase().substr(file.name.lastIndexOf('.'))
        if (!(this.acceptFileType.indexOf(isAcceptType) > -1)) {
          this.$message.warning('请上传' + this.acceptFileType + '格式文件')
          return reject(false)
        }
        // 文件小于100M
        const isLtSize = file.size / 1024 / 1024 < FILESIZE
        if (!isLtSize) {
          this.$message.warning('请上传' + FILESIZE + 'MB以内的文件')
          return reject(false)
        }
        this.importFileList.push(file)
        return resolve(false)
      })
    },
    // 未提交前删除文件，不涉及接口
    deleteFileBeforeSubmit (file) {
      this.importFileList = this.importFileList.filter(item => item.uid !== file.uid)
    }
  }
}
</script>

<style>
</style>
